<template>
<div><el-dialog
  title="用户分配角色"
  :visible.sync="visible">

            
                <el-checkbox-group v-model="ids" >
                    <ul>
                        <li v-for="role in roles" :key="role.roleId">
                         
                            <el-checkbox :label="role.roleId" >{{role.roleName}}</el-checkbox>
                        </li>
                    </ul>
                </el-checkbox-group>
            

  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
</el-dialog>
</div>
  
</template>

<script>
import {addUserRole} from '../../service/user'
import { mapActions,mapMutations,mapState } from 'vuex';
export default {
    data(){
        return {
            
        }
    },
    computed:{
        visible:{
            get(){
                return this.updateAddRoleVisible;
            },
            set(updateAddRoleVisible){
                this.setUpdateAddRoleVisible(updateAddRoleVisible);
            }
        },
        ids:{
            get(){
                return this.roleIds;
            },
            set(roleIds){
                this.setRoleIds(roleIds);
            }
        },
        ...mapState('user',['userId','updateAddRoleVisible']),
        ...mapState('role',['roles','roleIds'])
    },
    methods:{
        async update(){
            this.visible = false;
            console.log('ids:',this.ids);
            addUserRole(this.userId,this.ids);
            // this.setUsers();
        },
        ...mapMutations('user',['setUpdateAddRoleVisible']),
        ...mapMutations('role',['setRoleIds']),
        ...mapActions('user',['setUsers'])
    }
}
</script>

<style>

</style>